<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--基于设备逻辑分辨率页面开发-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"/>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
    <script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
    <script src="/assets/axios/axios.js"></script>

    <style>
        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;
        }
    </style>

    <style>
        .van-card {
            height: 160px
        }

        .van-card__thumb {
            width: 102px;
            height:136px
        }
    </style>
</head>
<body>

<div id="app">

    <!--遍历短评列表-->
    <template v-for="(evaluation,index) in evaluationList">
        <div style="border-bottom: 1px solid #cccccc">
            <div style="padding: 10px;">
                <span style="margin-right: 20px">{{evaluation.createTime}}</span>
                <span style="margin-right: 20px">{{evaluation.nickname}}</span>
                <van-rate v-model="evaluation.score" color="#ffd21e" void-icon="star" readonly allow-half></van-rate>
                <van-button icon="like-o" @click="enjoy(index)" type="success" size="small" style="width:40px;float:right" >{{evaluation.enjoy}}</van-button>
            </div>
            <div style="padding: 10px;">
                {{evaluation.content}}
            </div>
        </div>
    </template>

</div>

<script>

    const main={
        data() {
            return {
                evaluationList:[], //短评列表
            };
        },
        methods:{

        },
        mounted() {

            //钩子函数，页面初始化时执行的操作
            const objApp = this;//获取当前的应用对象

            /*window.location.search得到？及后面的字符串,match("[0-9]+")只保留数字*/
            var bookId = window.location.search.match("[0-9]+");

            /*2.请求得到对应书本的短评列表*/
            var uri="/evaluation/list?bookId="+bookId;
            axios.get(uri).then(function (resp){
                const json = resp.data;
                if (json.code==10000){
                    const list = json.data;
                    list.forEach(function (item){
                        //把时间戳转换成自定义日期格式
                        item.createTime=formatDate(item.createTime);
                        //绑定到对象中
                        objApp.evaluationList.push(item);
                    });

                } else {
                    /*数据错误，在控制台中打印*/
                    console.error(json);
                }
            });

        }
    }

    /*创建Vue*/
    const app=Vue.createApp(main);

    app.use(vant);

    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
    app.use(vant.Lazyload);

    // 调用函数组件，弹出一个 Toast
    vant.Toast('提示');

    app.mount('#app');



</script>

</body>
</html>